import React from 'react';

const ColorTitle = ({ value, cl, width="w-40", className }) => (
    <div className={className + ` mr-1 flex text-3xl justify-center items-center bg-${cl}-500 ` + width}>
        {value}
    </div>
);

const Title = ({ label, value, sub, width="w-32", className, cl="white" }) => {
    const getVal = () => {
        if (value) {
            return value;
        }

        return label;
    };

    const st = `${className} ${width} mr-2 py-1 text-2xl border border-${cl} text-${cl} items-center justify-center rounded`;

    if (sub) {
        return (
            <div className={st + "flex-col"}>
                <div className="flex justify-center">
                    {getVal()}
                </div>
                <div className="flex justify-center mx-1">
                    {sub}
                </div>
            </div>
        );
    }

    return (
        <div className={st + "flex"}>
            <div className="flex justify-center">
                {getVal()}
            </div>
        </div>
    );
};

export {ColorTitle, Title};
